<template>
  <div>
    <div class="D3interrevolution1">
      <div class="D3interrevolution">
        <img
          src="../assets/img/arrows.png"
          alt=""
          onclick="window.history.go(-1)"
        />
        <span>支付</span>
      </div>
    </div>
    <!-- 元数 -->
    <div class="D3unit">
      <p id="D3money101">{{ money }}</p>
      <span>应付金额(元)</span>
    </div>

    <!-- 订单 -->
    <div class="D3indent">
      <div class="D3indent1">
        <p>订单详情</p>
        <span>【全额支付】全国手机话费充值</span>
      </div>
      <div class="D3indent2">
        <p id="D3money08">订单金额</p>
        <span id="D3money102">{{ money }}元</span>
      </div>
    </div>

    <!-- 方式 -->

    <div class="D3payment1">
      <div class="D3payment2">
        <p>类型：</p>
        <input id="D3card" type="text" placeholder="充值" />
        <img src="../assets/img/箭头4.png" alt="" />
      </div>
    </div>

    <!-- 确定 -->
    <div class="D3ensure">
      <p id="D3ensure" @click="pay" :disabled="disabled">确定</p>
    </div>
    <van-dialog
      class="D3"
      v-model="showa"
      title="请输入支付密码"
      show-cancel-button
      @confirm="confirm"
    >
      <van-password-input
        :value="value"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = true"
      />
    </van-dialog>
  </div>
</template>

<script>
// 接口
import { rec } from "../api/Recharge1";
// 支付弹框
import { Dialog } from "vant";
// 消息通知
import { Notify } from "vant";
export default {
  data() {
    return {
      value: "123",
      showKeyboard: true,
      showa: false,
      show: false,
      money: this.$route.params.mo,
      value: "",
      disabled: true,
    };
  },
  methods: {
    pay() {
      this.showa = true;
    },
    confirm() {
      rec({
        phone: this.$route.params.phone,
        password: this.value,
        money: this.money,
      })
        .then((res) => {
          // console.log(res);
          console.log(res);
          if (res.code == 200) {
            console.log(res.data);
            Notify({ type: "primary", message: "充值成功" });
          } else {
            Notify({ type: "primary", message: "异常" + res.msg });
            if (res.msg == "10003  请10分钟后再试") {
              console.log(111);
              this.submissionFlag = false;
            }
          }
        })
        .catch((err) => {
          console.log("失败");
        });
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style src="../assets/css/recharge2.css"></style>
